<template>
	<view :data-theme="theme()" :class="theme() || ''">
		<view class="list">
			<view class="listItem" v-for="(item, index) in list" :key="index">
				<view class="timeBox">
					<view class="time">
						<span class="data">{{ item.data }}</span>
						<span class="line"></span>
						<span class="mouth">{{ item.mouth }}<span class="unit">{{ $t('user.month') }}</span></span>
						<span class="line"></span>
						<span class="year">{{ item.year }}<span class="unit">{{ $t('user.year') }}</span></span>
					</view>
					<view class="delTxt" @click="del(item, index)">{{ $t('user.delete') }}</view>
				</view>

				<view class="con">
					<view>{{ item.content }}</view>
					<image class="img" mode="aspectFit" :src="v" v-for="(v, idx) in item.image" :key="idx"></image>
				</view>
				<view class="prodcut">
					<image :src="item.productImage" model="aspectFit"></image>
					<view class="r">
						<view class="title">{{ item.productName }}</view>
						<view class="spec">{{ item.productAttr }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="d-c-c p30" v-if="list.length == 0 && !loading">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">{{ $t('user.no_records') }}</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			state_active: 0,
			list: [],
			last_page: 0,
			no_more: false,
			pageIndex: 1,
		}
	},
	onLoad: function (options) {
		// this.options = options;
	},
	onShow: function () {
		this.pageIndex = 1;
		this.list = [];
		uni.showLoading({
			title: this.$t('user.loading')
		});
		/*获取地址列表*/
		this.getData();
		uni.setNavigationBarTitle({
			title: this.$t('order.my_evaluation')
		})
	},
	methods: {
		/*获取数据*/
		getData() {
			let self = this;
			self.loading = true;
			self._postBody(
				'product/comment/userLists',
				{
					pageIndex: self.pageIndex,
					pageSize: 10,
				},
				function (res) {
					if (res.data.records && res.data.records.length > 0) {
						res.data.records.forEach((v) => {
							v.year = v.createTime.substr(0, 4);
							v.mouth = v.createTime.substr(5, 2);
							v.data = v.createTime.substr(8, 2);
						})
					}
					self.list = self.list.concat(res.data.records);
					self.last_page = res.data.lastPage;
					self.loading = false;
					if (self.last_page <= 1) {
						self.no_more = true;
						return false;
					}
					uni.hideLoading();
				}
			);
		},
		del(v, index) {
			let self = this;
			wx.showModal({
				title: this.$t('user.notification'),
				content: this.$t('user.confirm_delete_comment') + '?',
				success: function (o) {
					if (o.confirm) {
						self._post(
							'product/comment/delete',
							{
								commentId: v.commentId,
							},
							function (res) {
								uni.showToast({
									title: self.$t('user.delete_success'),
									duration: 1000,
									icon: 'none'
								});
								self.list.splice(index, 1)
							}
						);
					}
				}
			});
		},
		onReachBottom() {
			let self = this;
			if (self.no_more) {
				return;
			}
			self.pageIndex++;
			if (self.pageIndex <= self.last_page) {
				self.getData();
			} else {
				self.no_more = true;
			}
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #EBEBEB;
}

.list {
	padding: 20rpx;
}

.listItem {
	background-color: #fff;
	padding: 20rpx;
	margin-bottom: 20rpx;

	.timeBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.delTxt {
		color: #FD6A03;
	}

	.time {
		.unit {
			color: rgba(0, 0, 0, 0.9);
			font-weight: 400;
		}

		span {
			font-size: 26rpx;
			color: #000000;
			font-weight: 800;
		}

		.data {
			font-size: 38rpx;
		}

		.line {
			width: 4rpx;
			height: 22rpx;
			background-color: #FD6A03;
			display: inline-block;
			margin: 0 6rpx;
			transform: rotate(18deg);
		}
	}

	.con {
		letter-spacing: 1rpx;
		line-height: 42rpx;
		margin: 60rpx 0 30rpx 0;

		.img {
			width: 200rpx;
			height: 200rpx;
			display: inline-block;
			margin-right: 20rpx;
		}
	}

	.prodcut {
		display: flex;
		align-items: center;
		background: rgba(235, 235, 235, 0.8);
		font-size: 26rpx;

		image {
			width: 90rpx;
			height: 90rpx;
			margin-right: 6rpx;
			border-radius: 6rpx;
		}

		.spec {
			color: #959595;
			font-size: 24rpx;
			margin-top: 6rpx;
		}
	}
}
</style>
